<script setup>
import MyResourceApis from "@/apis/myResource.js"
import ListApis from "@/apis/list.js"
import MaterialApis from "@/apis/material.js";
import {ElMessage} from "element-plus";
import config from "@/config/index.js";

const industries = ['jiangonglei', 'caikuailei', 'zhicheng']
const exams = ref([])
const activeIndex = ref(0)
const materialList = ref({
  records: []
})

function init() {
  MyResourceApis.myBuyExam().then(res => {

    // res.data=res.data.filter(e => {
    //   return industries.includes(e.industryId)
    // })
    res.data.forEach(e => {
      e.categorys.forEach(e => {
        e.activeIndex = 0
      })
      e.activeIndex = 0
    })


    exams.value = res.data
    if (res.data[activeIndex.value].categorys.length > 0) {

      MyResourceApis.myBuyAsset({
        params: {
          type: "material",
          categoryIds: res.data[activeIndex.value].categorys[res.data[activeIndex.value].activeIndex].id
        }
      }).then(res1 => {
        exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children = (res1.data.length > 0 && res1.data[0].columnModels) || []

        if (exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children.length) {
          //   获取我的资料
          ListApis.materialByColumnId({
            params: {
              current: 1,
              size: 1000,
              industryCode: exams.value[activeIndex.value].industryId,
              examId: exams.value[activeIndex.value].id,
              categoryId: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].id,
              columnId: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children[exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].activeIndex].id,
            }
          }).then(res2 => {
            materialList.value.records = res2.data.records
          })
        }
      })
    }
  })
}

function toggleExam(item, index) {
  if (activeIndex.value == index) return;
  activeIndex.value = index;
  exams.value[activeIndex.value].activeIndex = 0

  if (exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children) {
    exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].activeIndex = 0
    materialList.value.records = []

    if (exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children.length) {
      ListApis.materialByColumnId({
        params: {
          current: 1,
          size: 1000,
          industryCode: exams.value[activeIndex.value].industryId,
          examId: exams.value[activeIndex.value].id,
          categoryId: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].id,
          columnId: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children[exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].activeIndex].id,
        }
      }).then(res2 => {
        materialList.value.records = res2.data.records
      }).finally(() => {

      })
    }

  } else {
    MyResourceApis.myBuyAsset({
      params: {
        type: "material",
        categoryIds: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].id
      }
    }).then(res1 => {
      exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children = (res1.data.length > 0 && res1.data[0].columnModels) || []

      exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].activeIndex = 0
      materialList.value.records = []
      if (exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children.length) {
        ListApis.materialByColumnId({
          params: {
            current: 1,
            size: 1000,
            industryCode: exams.value[activeIndex.value].industryId,
            examId: exams.value[activeIndex.value].id,
            categoryId: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].id,
            columnId: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children[exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].activeIndex].id,
          }
        }).then(res2 => {
          materialList.value.records = res2.data.records
        }).finally(() => {

        })
      }


    })
  }

}

function toggleCategory(item, index) {
  if (exams.value[activeIndex.value].activeIndex == index) return;
  exams.value[activeIndex.value].activeIndex = index;
  if (item.children) {
    exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].activeIndex = 0
    materialList.value.records = []

    if (exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children.length) {
      ListApis.materialByColumnId({
        params: {
          current: 1,
          size: 1000,
          industryCode: exams.value[activeIndex.value].industryId,
          examId: exams.value[activeIndex.value].id,
          categoryId: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].id,
          columnId: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children[exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].activeIndex].id,
        }
      }).then(res2 => {
        materialList.value.records = res2.data.records
      }).finally(() => {

      })
    }

  } else {
    MyResourceApis.myBuyAsset({
      params: {
        type: "material",
        categoryIds: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].id
      }
    }).then(res1 => {
      exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children = (res1.data.length > 0 && res1.data[0].columnModels) || []

      exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].activeIndex = 0
      materialList.value.records = []

      if (exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children.length) {
        ListApis.materialByColumnId({
          params: {
            current: 1,
            size: 1000,
            industryCode: exams.value[activeIndex.value].industryId,
            examId: exams.value[activeIndex.value].id,
            categoryId: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].id,
            columnId: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children[exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].activeIndex].id,
          }
        }).then(res2 => {
          materialList.value.records = res2.data.records
        }).finally(() => {

        })
      }


    })
  }

}

function toggleColumn(item, index) {
  if (exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].activeIndex == index) return;
  exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].activeIndex = index
  materialList.value.records = []

  ListApis.materialByColumnId({
    params: {
      current: 1,
      size: 1000,
      industryCode: exams.value[activeIndex.value].industryId,
      examId: exams.value[activeIndex.value].id,
      categoryId: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].id,
      columnId: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children[exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].activeIndex].id,
    }
  }).then(res2 => {
    materialList.value.records = res2.data.records
  }).finally(() => {

  })
}

function previewPdf(item) {
  if (item.attachmentInfos[0].path.indexOf(".pdf") == -1) {
    ElMessage({
      message: "暂不支持非pdf预览",
      type: "warning"
    })
    return;
  }
  window.open(config.prefix_image + item.attachmentInfos[0].path, "_blank")
}

function like(item) {
  MaterialApis.updateLike({
    id: item.id,
    type: 0,
    categoryId: exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].children[exams.value[activeIndex.value].categorys[exams.value[activeIndex.value].activeIndex].activeIndex].id
  }).then(res => {

    ElMessage({
      message: "点赞成功",
      type: "success"
    })
  })
}

function download(item, index) {
  fetch(config.prefix_image + item.attachmentInfos[0].path, {
    method: 'GET',
  })
      .then(response => response.blob())
      .then(blob => {
        // 创建一个虚拟的链接元素，模拟点击下载
        const link = document.createElement('a');
        link.style.display = 'none';
        const url = window.URL.createObjectURL(blob);
        link.href = url;
        link.download = item.attachmentInfos[0].name;
        document.body.appendChild(link);

        // // 模拟点击
        link.click();
        // // 移除虚拟链接元素
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url)


        MaterialApis.addFrequency({
          type: 'download_time',
          id: item.id
        })
      })
}

init()


</script>

<template>
  <div class="materialListContainer">
    <div class="top1">
    </div>
    <div class="content1">
      <div class="the-left">
        <div class="the-box1">
          <div class="aa">
            <div class="bb">考试</div>
            <div class="cc">
              <div
                  v-for="(item,index) in exams"
                  :key="index"
                  @click="toggleExam(item,index)"
                  class="dd"
                  :class="{active:activeIndex==index}">
                {{ item.name }}
              </div>
            </div>

          </div>
          <div class="aa">
            <div class="bb">科目</div>
            <div class="cc"
                 v-if="exams.length>0&&exams[activeIndex].categorys"
            >
              <div
                  v-for="(item,index) in exams[activeIndex].categorys"
                  :key="index"
                  @click="toggleCategory(item,index)"
                  class="dd"
                  :class="{active:index==exams[activeIndex].activeIndex}">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="aa">
            <div class="bb">类型</div>

            <div class="cc"

                 v-if="exams.length>0&&exams[activeIndex].categorys&&exams[activeIndex].categorys.length>0&&exams[activeIndex].categorys[exams[activeIndex].activeIndex].children"
            >
              <div
                  @click="toggleColumn(item,index)"
                  v-for="(item,index) in exams[activeIndex].categorys[exams[activeIndex].activeIndex].children"
                  :key="index"
                  class="dd"
                  :class="{active:index==exams[activeIndex].categorys[exams[activeIndex].activeIndex].activeIndex}">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <el-scrollbar height="800" style="margin-top: 30px">
          <div class="scroll-container1">
            <div class="flex-item" v-for="(item5,index5) in materialList.records" :key="index5">
              <div class="the-left">
                <div class="the-left-flex">
                  <img class="course-icon" src="@/assets/images/pdf.svg">
                  <span class="the-left-text1">{{ item5.attachmentInfos[0].name }}</span>
                </div>
                <div class="the-left-flex">
                  <span class="tips2" v-if="item5.freeFlag">免费</span>
                  <span class="the-left-text2" v-if="item5.likeTime"><span>点赞数：{{ item5.likeTime }}</span></span>
                  <span class="the-left-text2" v-if="item5.watchTime"><span>观看数：{{ item5.watchTime }}</span></span>
                  <span class="the-left-text2" v-if="item5.downloadTime"><span>下载数：{{
                      item5.downloadTime
                    }}</span></span>
                </div>
              </div>
              <div class="the-right-btn">
                <el-button class="my-btn1" @click="like(item5)" type="primary" round>点赞</el-button>
                <el-button class="my-btn1" v-if="item5.freeFlag" @click="previewPdf(item5)" type="primary" round>查看
                </el-button>
                <el-button class="my-btn1" v-if="item5.freeFlag" @click="download(item5)" type="primary" round>下载
                </el-button>

              </div>

            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<style scoped>
.top1 {
  height: 130px;
  background: blue;
}

.content1 {
  width: 1400px;
  margin: 50px auto;
  gap: 26px;
  display: flex;
}

.the-left {
  flex: 1;
}

.the-box1 {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  min-height: 330px;
}

.the-box1 .aa {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;

}

.the-box1 .aa .bb {
  width: 80px;
}

.the-box1 .aa .dd {
  padding: 2px 10px;
  cursor: pointer;
}

.the-box1 .aa .dd:hover {
  color: #409eff;
}

.the-box1 .aa .dd.active {
  border-radius: 100px;
  background: linear-gradient(180deg, #E6EFFF 0%, #FFF 100%);
  color: #409eff;
}

.the-box1 .aa .cc {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}


.scroll-container1 {
  min-height: 1150px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.scroll-container1 .flex-item {
  display: flex;
  padding: 24px 24px 24px 20px;
  align-items: start;
  gap: 8px;
}

.scroll-container1 .flex-item .the-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.scroll-container1 .flex-item .the-left .the-left-text1 {
  color: #333;
  font-size: 15.75px;
  font-weight: 700;
}

.scroll-container1 .flex-item .the-left .the-left-text2 {
  color: #888;
  font-size: 12px;
  font-weight: 400;
}

.the-left-flex {
  display: flex;
  align-items: center;
  gap: 6px;
}

.the-left-flex .course-icon {
  width: 18px;
  height: 18px;
}

.tips1 {
  color: #3C6CFF;
  font-size: 12px;
  font-weight: 400;
  border-radius: 2px;
  background: linear-gradient(180deg, #E6EFFF 0%, #FFF 100%);
  padding: 3px;
}

.tips2 {
  color: #F51E29;
  font-size: 12px;
  font-weight: 400;
}

.the-right-btn ::v-deep(.el-button) {
  --el-color-primary: #3C6CFF;
}

.the-right-btn .my-btn1 {

  width: 92px;
  height: 36px;
}

.the-right-box1-1 img {
  width: 98px;
  height: 68px;
}
</style>